<template>
	<view>
		<!--Tab 互关  关注   粉丝  -->
		<view class=" flex align-center justify-center" style="height: 100rpx;">
			<view class="flex align-center justify-center flex-1" v-for="(item, index) in tabBars" :key="index"
				:class="tabIndex === index ? 'text-main font-lg font-weight-bold' : 'font-md'"
				@click="changeTab(index)">
				{{item.name}}
				<text class="pl-1" v-if="item.num > 0">{{item.num}}</text>
			</view>
		</view>

		<!-- 列表，做成滑动的样子 -->
		<swiper :duration="1000" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH +'px;'">
			<swiper-item class="swiper-item" v-for="(item, index) in newsList" :key="index">
				<scroll-view @scrolltolower="loadmore(index)" scroll-y="true" :style="'height:'+scrollH +'px;'">
					<template v-if="item.list.length > 0">
						<block v-for="(item1, index1) in item.list" :key="index1">
							<!-- 用户列表样式 -->
							<user-list :item="item1" :index="index1"></user-list>
						</block>
						<!-- 上拉加载 -->
						<load-more v-if="item.list.length > 10" :loadmore="item.loadMore"></load-more>
					</template>
					<template v-else>
						<no-thing></no-thing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	const demo = [{
			avatar: '/static/default.jpg',
			userName: '昵称',
			sex: 1,
			age: 24,
			isFollow: true,
		},
		{
			avatar: '/static/default.jpg',
			userName: '昵称2',
			sex: 2,
			age: 18,
			isFollow: false,
		},
	]
	import loadMore from '@/components/common/load-more.vue';
	import userList from '@/components/user-list/user-list.vue';
	export default {
		components: {
			loadMore,
			userList
		},
		data() {
			return {
				tabIndex: 0,
				tabIndex: 0,
				tabBars: [{
						name: '互关',
						num: 0,
					},
					{
						name: '关注',
						num: 1
					},
					{
						name: '粉丝',
						num: 2
					}
				],
				newsList: [{
					list: []
				}],
				scrollH: 600,
			}
		},
		// 监听点击搜索框
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search?type=user',
			});
		},

		// 监听导航栏搜索按钮
		onNavigationBarButtonTap() {
			uni.navigateBack({
				delta: 1
			});
		},
		onLoad() {
			uni.getSystemInfo({ //异步获取系统信息
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(100)
				}
			})

			// 根据选项生成列表
			this.getData();

		},
		methods: {
			// 获取数据
			getData() {
				let arr = []
				for (var i = 0; i < this.tabBars.length; i++) {
					// 生成列表模板
					let obj = {
						// 1、上拉加载更多 2.加载中... 3.没有了
						loadMore: "上拉加载更多",
						list: []
					}
					if (i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.newsList = arr
			},
			//切换选项卡
			changeTab(e) {
				this.tabIndex = e
			},
			onChangeTab(e) {
				this.tabIndex = e.detail.current
			},
			// 上拉加载更多
			loadmore(index) {
				// 拿到当前列表
				let item = this.newsList[index];
				// 判断是否处于可加载状态
				if (item.loadMore !== '上拉加载更多') return;
				// 修改当前列表加载状态
				this.newsList[index].loadMore = '加载中...';
				console.log("上拉加载更多")
				// 模拟数据请求
				setTimeout(() => {
					// 加载数据
					item.list = [...item.list, ...item.list];
					// 恢复加载状态
					this.newsList[index].loadMore = '上拉加载更多'
				}, 2000)
			}
		}
	}
</script>

<style>

</style>